<template>
  <div class="container">
    <el-card class="box-card">
      <el-row type="flex" justify="end">
        <el-button style="float: right;margin-bottom: 20px" type="success" @click="addFn" >
        <i class="el-icon-edit"></i>
        添加菜单
      </el-button>
      </el-row>
      <!-- <el-table :data="tableDate" row-key="id"  default-expand-all
       :tree-props ="{children: 'childs'}"
      >
        <el-table-column align="center" width="200" label="标题" prop="title" />
        <el-table-column align="center" width="951"  label="权限点代码" prop="code"/>
        <el-table-column align="center" width="120" label="操作">
          <template>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <TreeTable
      :treeStructure="true"
      :listLoading="listLoading"
      :columns="columns"
      :data="tableDate"
      @removeUser="removeUserFn"
      @handleUpdate="handleUpdateFn" />
       <menu-add
      ref="MenuAdd"
      :text="text"
      pageTitle="菜单"
      :PermissionGroupsList="tableDate"
      :treeStructure="true"
      @handleCloseModal="handleCloseModalFn" />
    </el-card>

  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus'

import menuAdd from '../components/menu-add.vue'
import TreeTable from '@/components/TreeTable'
export default {

  data () {
    const render = (h, { index, row }) => {
      if (index === 0) {
        if (row.pid === null) {
          return h('span', row.title)
        } else if (row._parent.childs) {
          return h('div', { attrs: { class: 'lv2' } }, row.title)
        } else {
          return h('div', { attrs: { class: 'lv3' } }, row.title)
        }
      } else {
        return h('span', row.code)
      }
    }
    return {
      tableDate: [],
      listLoading: false,
      columns: [ // 用户表格配置表
        { prop: 'title', width: '200', text: '标题', render },
        { prop: 'code', text: '权限点代码', render }
      ],

      text: ''
    }
  },
  components: {
    menuAdd,
    TreeTable
  },
  created () {
    this.getMenusList()
  },

  methods: {
    async getMenusList () {
      // 获取菜单列表
      this.listLoading = true
      const { data } = await list()
      console.log(data)
      this.tableDate = data
      this.listLoading = false
    },
    async removeUserFn (id) {
      try {
        await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id })
        this.$message.success('删除成功')
        this.getMenusList()
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        console.log(error)
      }
    },

    async addFn () {
      this.$refs.MenuAdd.dialogFormVisible = true
      this.$refs.MenuAdd.handleResetForm()
      this.getMenusList()
      this.text = '新建'
    },
    handleUpdateFn ({ id, points, childs }) {
      this.text = '修改'
      if (points || childs) {
        this.$refs.MenuAdd.changeType('menu')
      } else {
        this.$refs.MenuAdd.changeType('points')
      }
      this.$refs.MenuAdd.hanldeEditForm(id)
      this.$refs.MenuAdd.dialogFormVisible = true
    },

    handleCloseModalFn () {
      this.getMenusList()
      this.$refs.MenuAdd.dialogFormVisible = false
      this.$refs.MenuAdd.handleResetForm()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
}
.cell {
  color: #909399;
  font-weight: 500;
}
</style>
